<template>
    <dv-border-box-13>
        <div class="box">
            <div class="box-show">
                <div class="show-header">
                    <span class="spans-icon">
                        <v-icon name="align-left" class="text-icon"></v-icon>
                    </span>
                    <span>任务完成排行榜</span>

                </div>
                <div class="show-content">
                    <dv-scroll-board class="dv-scr-board" :config="config" />
                </div>
            </div>
        </div>
    </dv-border-box-13>
</template>

<script>
export default {
    data() {
        return {
            config: {
                header: ['组件', '分支', '覆盖率'],
                data: [
                    ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
                    ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
                    ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
                    ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
                    ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
                    ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
                    ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
                    ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
                    ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
                    ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
                ],
                rowNum: 7, //表格行数
                headerHeight: 35,
                headerBGC: '#0f1325', //表头
                oddRowBGC: '#0f1325', //奇数行
                evenRowBGC: '#171c33', //偶数行
                index: true,
                columnWidth: [50],
                align: ['center']
            }
        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
    methods: {

    },
    components: {

    },
};
</script>

<style lang="scss" scoped>
.dv-border-box-13 {
    width: 300px;
    height: 100%;
    margin: 0 5px;
}

.box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 16px;

    .box-show {
        width: 100%;
        height: 100%;
        background: rgba(19, 25, 47, 0.6);
        display: flex;
        flex-wrap: wrap;

        .show-header {
            width: 100%;
            height: 20px;
            line-height: 20px;
            color: white;
            display: flex;
            align-items: center;

            // padding: 8px 0 0 0;
            .spans-icon {
                margin-top: 10px;
            }

            span {
                margin: 8px 0 0 8px;
                line-height: 20px;
                display: inline-block;
                color: #c3cbde;
                font-size: 12px;
            }
        }

        .show-content {
            width: 100%;
            height: 95%;

            .dv-scr-board {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>
